<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  *{
    padding: 0;
    margin: 0;
  }
  ul{
    list-style: none;
    display: flex;
    height: 50px;
    align-items: center;
  }
  li{
    flex: 1;
    text-align: center;
  }
</style>
<body>
    <ul class="tab_ul">
        <li>王者荣耀</li>
        <li>英雄联盟</li>
        <li>和平精英</li>
        <li>穿越火线</li>
    </ul>
    <div class="count">
        欢迎来到 王者荣耀
    </div>
</body>
</html>
<script>
    // class 类是es6 新增的。
    // class 类也是用来创建对象的。
    // 我们通长把具有相同的某些特性的事物归为一类。
    // js 开始的时候，是没有类的概念的。
    class Start {
      constructor(val){ // 当我们使用 new 关键字实例化类的时候，会被自动调用。// this 指向的也是实例化对象
        this.name = val
      }
      sing(){
        console.log(this.name);
      }
    }
    
    let obj = new Start('张三');
    let obj1 = new Start('李四');
    console.log(obj1);
    console.log(obj);
    obj.sing();
    // 所以我们可以使用类来创建出具有相同特性的对象。

    // function Child(){

    // }
    // Child.prototype.sing  = function(){

    // }



    // js 面向过程编程，面向对象编程
    
    // 下面的这个案例我们称为面向过程。
    // let dom = document.querySelector('ul');
    // dom.addEventListener('click',(e)=>{
    //     // console.log(e.target.tagName);
    //   if(e.target.tagName == "LI"){
    //     let txt = e.target.innerText;
    //     document.querySelector('div').innerText = `欢迎来到 ${txt}`
    //   }
    // })


   // 面向对象

   class Tab {
    constructor(tabDom,count){
      this.tabDom = document.querySelector(tabDom);
      this.count = document.querySelector(count);
      this.created();
    }
    created(){
     this.tabDom.addEventListener('click',(e)=>{
        // console.log(e.target.tagName);
      if(e.target.tagName == "LI"){
        let txt = e.target.innerText;
        this.count.innerText = `欢迎来到 ${txt}`
      }
    })
    }
   }
   // 关注的是实现了，tab切换的这个结果。
//    let dom1 = new Tab('.tab_ul',".count");
//    console.log(dom1);
   class Pattab extends Tab{
    constructor(val1,val2){
      super(val1,val2);
      this.addColor();
    }
    addColor(){
      this.tabDom.addEventListener('click',function(e) {
        if(e.target.tagName == "LI"){
           for (let i = 0; i < this.children.length; i++) {
            this.children[i].style.color = "#000"
           }
           e.target.style.color = "red"
        }
      })
    }
   }
   let dom1 = new Pattab('.tab_ul',".count");
</script>